<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>4.深度监视</title>
		<style>
			*{
				margin-top: 10px;
			}
		</style>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			深度监视：
					(1).watch默认不监测对象内部值的改变（监视一层，即：对象地址值）。
					(2).配置deep:true可以监测对象内部值改变（监视多层）。
			备注：
					(1).Vue自身可以监测对象内部值的改变（无论多深都可以），但Vue给程序员提供的watch默认不可以！
					(2).使用watch时根据数据的具体结构，以及需求，决定是否采用深度监视。
		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<ul>
				<li>姓名：{{name}}</li>
				<li>性别：{{gender}}</li>
				<li>真实年龄：{{age.realAge}}</li>
				<li>对外年龄：{{age.foreignAge}}</li>
				<button @click="name += '~' ">修改姓名</button>
				<button @click="age.realAge += 1">真实年龄+1岁</button>
				<button @click="age.foreignAge += 1">对外年龄+1岁</button>
				<button @click="age = {foreignAge:18,realAge:30} ">替换整个age对象</button>
			</ul>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false

			new Vue({
				el:'#demo',
				data:{
					name:'张三',
					gender:'男',
					age:{
						foreignAge:25,
						realAge:40,
					}
				},
				watch:{
					//监视基本数据类型
					/* name:{
						handler(value){
							console.log('name变化了，值为：',value)
						}
					}, */
					
					//监视一个对象中的某个属性
					/* 'age.realAge':{
						handler(value){
							console.log('age中的realAge变化了',value)
						}
					}, */

					//监视整个age对象（无法检测对象中属性的变化，检测的是对象地址值）
					/* age:{
						handler(value){
							console.log('变化了@@@@',value)
						}
					} */

					//不仅要监视整个age对象、也要监视对象中所有属性的变化
					/* age:{
						deep:true, //深度监视
						handler(value){
							console.log('变化了@@@@',value)
						}
					} */
				}
			})
			
		</script>
	</body>
</html>